import React, {Component, PureComponent} from 'react';
import {
  View,
  TouchableOpacity,
  StyleSheet,
  Image,
  Text,
  Keyboard,
} from 'react-native';

// import {StackNavigator} from 'react-navigation'
import PropTypes from 'prop-types';
import Layout from '../config/LayoutConstants';
import {CachedImage} from 'react-native-img-cache';

const styles = StyleSheet.create({
  headerBgContainer: {
    flexDirection: 'row',
    width: Layout.WINDOW_WIDTH,
    backgroundColor: '#160231',
    zIndex: 10,
  },
  blackBgContainer: {
    flexDirection: 'row',
    backgroundColor: 'black',
  },
  transparentBgContainer: {
    flexDirection: 'row',
    backgroundColor: 'transparent',
  },
  icon: {
    height: 20,
    width: 20,
  },
  rightIcon: {
    height: 20,
    width: 20,
  },
  backWhiteIcon: {
    height: 16,
    width: 24,
  },
  headerButtonBox: {
    height: 40,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    paddingLeft: 10,
    paddingRight: 10,
  },
  headerTitleBox: {
    flex: 1,
    position: 'absolute',
    left: 50,
    right: 50,
    bottom: 0,
    height: 40,
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'center',
    width: Layout.WINDOW_WIDTH - 100,
  },
  headerTitle: {
    fontSize: 18,
    color: 'white',
    fontWeight: 'bold',
    width: Layout.WINDOW_WIDTH - 100,
    textAlign: 'center',
  },
  whiteTitle: {
    fontSize: 18,
    color: 'white',
    width: Layout.WINDOW_WIDTH - 100,
    textAlign: 'center',
  },
  rightText: {
    color: '#000',
    fontSize: 14,
    alignSelf: 'flex-end',
    height: 40,
    lineHeight: 40,
  },
});

// Header {白色背景 蓝色返回按钮 黑色title}
class NormalHeader extends PureComponent {
  static propTypes = {
    navigation: PropTypes.object.isRequired,
    leftPress: PropTypes.func,
    text: PropTypes.string,
    left: PropTypes.object,
    right: PropTypes.any,
    bgStyle: PropTypes.object,
  };

  render() {
    const {text, left, right, bgStyle} = this.props;
    const height = Layout.NAVIGATION_HEIGHT;
    let contentPaddingTop = {paddingTop: 24};
    if (Layout.isIphoneX()) {
      contentPaddingTop = {paddingTop: 48};
    }

    return (
      <View
        style={[
          styles.headerBgContainer,
          contentPaddingTop,
          {height},
          bgStyle,
        ]}>
        {left ? (
          <TouchableOpacity
            style={[styles.headerButtonBox, {marginLeft: 10, marginRight: 10}]}
            onPress={left.onPress}>
            <Image
              style={[styles.icon, left.imageStyle]}
              resizeMode="contain"
              source={left.icon}
            />
            {!left.text ? null : (
              <Text
                style={{color: 'white', fontSize: 16, marginLeft: 6}}
                onPress={left.onPress}>
                {left.text}
              </Text>
            )}
          </TouchableOpacity>
        ) : null}
        <View style={[styles.headerTitleBox]}>
          <Text style={styles.headerTitle} numberOfLines={1}>
            {text}
          </Text>
        </View>
        <View
          style={{
            position: 'absolute',
            height: 40,
            bottom: 0,
            right: 0,
            flexDirection: 'row',
          }}>
          {(right || []) instanceof Array ? (
            (right || []).map((rightBtn, index) => {
              return (
                <TouchableOpacity
                  style={[
                    styles.headerButtonBox,
                    {width: 40, height: 40, marginRight: 10},
                    rightBtn.containerStyle,
                  ]}
                  onPress={rightBtn.onPress}
                  key={index + ''}>
                  <CachedImage
                    style={[
                      {width: '100%', height: '100%'},
                      rightBtn.imageStyle,
                    ]}
                    cache={'force-cache'}
                    resizeMode={rightBtn.mode || 'contain'}
                    source={rightBtn.icon}
                  />
                </TouchableOpacity>
              );
            })
          ) : (
            <TouchableOpacity
              style={[
                styles.headerButtonBox,
                {width: 40, marginRight: 10},
                right.containerStyle,
              ]}
              onPress={right.onPress}>
              {!right.icon ? null : (
                <Image
                  style={[{width: '100%', height: '100%'}, right.imageStyle]}
                  resizeMode={right.mode || 'contain'}
                  source={right.icon}
                />
              )}
              {!right.text ? null : (
                <Text
                  style={{
                    color: 'white',
                    fontSize: 18,
                    fontWeight: 'bold',
                    marginLeft: 6,
                  }}
                  onPress={right.onPress}>
                  {right.text}
                </Text>
              )}
            </TouchableOpacity>
          )}
        </View>
      </View>
    );
  }
}

export {NormalHeader};
